<script lang="ts" setup>
import { ref } from 'vue'
import CNav from '@/components/CNav.vue'
import { useUserInfoStore } from '@/stores'
import { publishMsg } from '@/api/user'

const content = ref(useUserInfoStore().publishText)
const onCancel = () => {
  useUserInfoStore().setPublishText(content.value)
  // 可以根据实际情况返回上一页
  uni.navigateBack()
}

async function onPublish() {
  if (!content.value.trim()) {
    uni.showToast({
      title: '内容不能为空',
      icon: 'none',
    })
    return
  }

  const result = await publishMsg({
    content: content.value,
  })
  if (!result.code) {
    uni.showToast({
      title: '发布失败',
      icon: 'none',
    })
    return
  }
  // 这里可以处理发布逻辑，例如调用API上传
  uni.showToast({
    title: '发布成功',
    icon: 'success',
  })
  // 清空内容并返回上一页
  content.value = ''

  useUserInfoStore().setPublishText('')
  setTimeout(() => {
    uni.redirectTo({
      url: '/pages/profile/profile',
    })
  }, 500)
}
</script>

<template>
  <view class="container">
    <CNav left-text="取消" @left-click="onCancel" title="发布文字" />
    <!-- 文字编辑区 -->
    <uv-textarea class="editor" v-model="content" placeholder="说点什么..."></uv-textarea>
    <!-- 发布按钮 -->
    <uv-button class="publishBtn" type="primary" @click="onPublish">发布</uv-button>
  </view>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;

  .editor {
    flex: 1;
    padding: 20px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border: none;
    outline: none;
    resize: none;
    max-height: 700rpx;
  }

  .editor::placeholder {
    color: #ccc;
  }
  .publishBtn {
    width: 700rpx !important;
    text-align: center;
    margin: 50rpx auto;
  }
}
</style>
